<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郭嘉碧">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        .box{
            display: flex;
            font-size: 12px;
            position: relative;
        }
        .box>div{
            margin-left: 10px;
            /* position: relative; */
        }
        a{
            display: inline-block;
            width: 19px;
            height: 19px;
            background-image: url(star.png);
        }
        a.active{
            background-position: 0 -28px;            
        }
        a.current{
            background-position: 0 -28px;            
        }
       
         .evaluate{
            border:1px solid #FF6600;
            position: absolute;
            left: 0;
            top: 20px;
            width: 120px;
            text-align: left;
            display: none;  
        } 
         .box>div:hover .evaluate{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>宝贝与描述相符</span>
        <div>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <div class="evaluate"></div>
        </div>
    </div>
<script src=jquery.js></script>
</body>
</html>
<script>
//   展示星星
    function showStar(count){
        $('a').eq(count).addClass('active').prevAll().addClass('active');
    }
    var msg = [
        " 很不满意<br><span style='color:black;'>差得太离谱，与卖家描述的严重不符，非常不满</span>",
        " 不满意<br><span style='color:black;'>部分有破损，与卖家描述的不符，不满意</span>",
        " 一般<br><span style='color:black;'>质量一般，没有卖家描述的那么好</span>",
        " 满意<br><span style='color:black;'>质量不错，与卖家描述的基本一致，还是挺满意的</span>",
        " 非常满意<br><span style='color:black;'>质量非常好，与卖家描述的完全一致，非常满意</span>"
    ];
    //  鼠标进去 显示星星 和文字
    $('a').mouseover(function(){
        showStar($(this).index());
        $('.evaluate').css('left',$(this).offset().left - 50);
        $('.evaluate').html($(this).index()+1+'分'+msg[$(this).index()]).css('color','red');
        
    });
    // 鼠标出去 星星消失
    $('a').mouseout(function(){
        $('a').removeClass('active');
    });

    // 鼠标点击 显示星星 不消失
    $('a').click(function(count){
        $(this).addClass('current').prevAll().addClass('current').end().nextAll().removeClass('current');        
    });
</script>
